<template>
  <a-card class="ax_sticky_top">
    <template #title>
      <h3 class="text-14">菜单权限</h3>
    </template>
    <template #extra>
      <a-tooltip title="前往帮助中心">
        <a
          class="system__icon"
          target="_blank"
          href="https://www.yuque.com/u32997899/ax/czw607hgifghh19p?singleDoc# 《系统菜单》"
        >
          <QuestionCircleTwoTone />
        </a>
      </a-tooltip>
    </template>
    <a-flex class="mb-12" :gap="12" wrap="wrap">
      <div>
        <a-input
          v-model:value="menuTable.query.menuName"
          style="width: 160px"
          placeholder="请输入菜单名称"
          @press-enter="menuList"
          allow-clear
        ></a-input>
      </div>
      <div>
        <a-input
          v-model:value="menuTable.query.component"
          style="width: 160px"
          placeholder="请输入组件路径"
          @press-enter="menuList"
          allow-clear
        ></a-input>
      </div>
      <a-button type="primary" @click="menuList">搜索</a-button>
    </a-flex>

    <a-flex justify="space-between" :align="'center'">
      <a-flex justify="space-between" :align="'center'">
        <a-flex :align="'center'" :gap="4">
          <div v-perm="'system:menu:add'">
            <a-tooltip title="新建">
              <a-button type="primary" @click="menuCreate">
                <PlusOutlined />
              </a-button>
            </a-tooltip>
          </div>

          <div v-perm="'system:menu:edit'">
            <a-tooltip title="编辑">
              <a-button type="link" @click="menuEdit()" :disabled="menuTable.keys.length !== 1">
                <EditOutlined />
              </a-button>
            </a-tooltip>
          </div>
          <div v-perm="'system:menu:list'">
            <a-tooltip title="刷新">
              <a-button type="link" @click="menuList">
                <ReloadOutlined />
              </a-button>
            </a-tooltip>
          </div>
          <div v-perm="'system:menu:remove'">
            <a-popconfirm
              title="确定要删除吗"
              :disabled="menuTable.keys.length === 0"
              placement="bottomRight"
              @confirm="menuDelete()"
            >
              <a-tooltip title="批量删除">
                <a-button danger type="link" :disabled="menuTable.keys.length === 0">
                  <DeleteOutlined />
                </a-button>
              </a-tooltip>
            </a-popconfirm>
          </div>
        </a-flex>
      </a-flex>
      <a-flex>
        <div v-perm="'system:menu:export'">
          <a-tooltip title="导出">
            <a-button type="link" @click="menuExport">
              <ExportOutlined />
            </a-button>
          </a-tooltip>
        </div>
        <FieldVue
          :columns="menuColumns"
          :raw="menuRawColumns"
          :module-name="menuTable.moduleName"
        />
      </a-flex>
    </a-flex>
  </a-card>
</template>

<script setup lang="ts">
import FieldVue from '@/views/components/table/Field.vue';
import {
  QuestionCircleTwoTone,
  type DeleteOutlined,
  type ReloadOutlined,
} from '@ant-design/icons-vue';
import { menuColumns, menuRawColumns } from '../../data/column';
import { menuCreate, menuDelete, menuEdit, menuExport, menuList } from '../../data/curd';
import { menuTable } from '../../data/table';
</script>

<style lang="scss" scoped></style>
